<script setup lang="ts">
import { computed, onUpdated, ref } from 'vue'
//发出事件
const emit = defineEmits<{
  (e: 'select', selected: boolean): void
}>()
/**
 * 属性
 * 1.enable 是否可用
 * 2.selectable 当时组件是响应选中事件还是点击事件
 */
const props = defineProps<{
  alt: string
  select: boolean
}>()
const selected = ref(props.select)
onUpdated(() => {
  selected.value = props.select
})

/**
 * 响应点击事件，当组件处于无效状态下，点击事件不应该响应
 */
function onClick() {
  //选中状态取反
  selected.value = !selected.value
  emit('select', selected.value)
}
const classActive = computed(() => {
  return selected.value
    ? {
        background: '#eeeeee'
      }
    : {}
})
</script>

<template>
  <div class="button" @mousedown.capture.prevent.stop="onClick">
    <div class="innerBounds" :style="classActive">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.button {
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button .innerBounds {
  border-radius: 8px;
  display: flex;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
}
.active {
  background: #eeeeee;
}
</style>
